<template>
	<view>
		<scroll-view scroll-x="true" class="businessArea">
		    <!-- 直接在业务项元素上使用 v-for 循环 -->
			<view v-for="item in businessList" :key="item.id || item" class="business_item" @click="urlTo(item.name)">
		  <view class="items" >
			  <view class="img">
			   <image :src="item.pic" mode="aspectFill" style="width: 30rpx;height: 30rpx;"></image>
		     </view>
			 <view class="">{{ item.name || item }}
			 </view></view>
			
			    
		    </view>
		  </scroll-view>
	 
	</view>
</template>

<script>
	import getPois from '../utils/getPois.js'
	
	export default {
		name:"businessList",
	
			props: {
			    location: {
			      type: Object,
			      default: () => ({}) // 可以设置一个默认的空对象
			    }
		},
		data() {
			return {
				businessList: [
					{ id: 1, name: "美食" ,pic:'/static/businessIcon/food.png'},
					{ id: 2, name: '娱乐' ,pic:'/static/businessIcon/kraok.png'},
					{ id: 3, name: '店铺' ,pic:'/static/businessIcon/ctd.png'},
					{ id: 4, name: '公司' ,pic:'/static/businessIcon/home.png'},
					{ id: 5, name: '美容' ,pic:'/static/businessIcon/sev.png'},
					{ id: 6, name: '拼车' ,pic:'/static/businessIcon/bank.png'},
					{ id: 7, name: '维修',pic:'/static/businessIcon/reshop.png' },
					
				],
				showList:[],
							};
		},
		methods:{
			urlTo(item){
			console.log(item)
			
					uni.navigateTo({
					url:`/pages/businessPage/businessPage?word=${item}`
				})
	  
			},
		  async getData(){
						   const pois= await getPois(this.location.location[1].longitude,this.location.location[1].latitude,item)
			  console.log("地图"+JSON.stringify(pois))
			   return pois
		  }	
		}
	}
	
</script>

<style>
.businessArea {
	
	position: fixed;
	top: 90px;
	z-index: 666;
	background-color: white;
  /* 开启横向滚动 */
  	/* #ifndef APP-PLUS-NVUE */
		white-space: nowrap;
	/* #endif */ 
  /* 隐藏默认的滚动条 */
  overflow-x: auto; 
  overflow-y: hidden; 
  /* 设置滚动区域的高度 */
  height: 30px; 
  padding: 5px; 
}
.items{
	
	display: flex;
	flex-wrap: nowrap;
	height: 35rpx;
    align-items: center;
    justify-content: center;
	padding: 4rpx;
 }

.business_item {
  /* 让业务项水平排列 */
  display: inline-block; 
  height: 32px;
  
  align-items: center;
  justify-content: center;
  text-align: center;
  width: auto;
  padding: 5px; 
  margin-left: 10px;

  background-color: #f0f0f0; 
  border-radius: 5px; 
  /* 防止内容换行 */
  white-space: normal; }
  .img{
	  display: flex;
	  align-items: center;
	  width: 30rpx;
	  height: 30rpx;
	  
  }
  .text{}


.businessshop{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index:1000;
	
}
</style>